<template>
    <div>
        <van-tabbar v-model="active">
            <van-tabbar-item to="/index">
                <span>首页</span>
                <template #icon="props">
                    <img :src="props.active ? indexIcon.active : indexIcon.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/course">
                <span>课程</span>
                <template #icon="props">
                    <img :src="props.active ? courseIcon.active : courseIcon.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item  to="/record">
                <span>约课记录</span>
                <template #icon="props">
                    <img :src="props.active ? practiceIcon.active : practiceIcon.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/practice">
                <span>练习</span>
                <template #icon="props">
                    <img :src="props.active ? recordIcon.active : recordIcon.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/user">
                <span>我的</span>
                <template #icon="props">
                    <img :src="props.active ? userIcon.active : userIcon.inactive" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: 0,
            indexIcon: {
                active:require('@/assets/theme-img/home-active.png') ,
                inactive:require('@/assets/theme-img/home.png'),
            },
            courseIcon: {
                active:require('@/assets/theme-img/course-active.png') ,
                inactive:require('@/assets/theme-img/course.png'),
            },
            practiceIcon: {
                active:require('@/assets/theme-img/home-active.png') ,
                inactive:require('@/assets/theme-img/home.png'),
            },
            recordIcon: {
                active:require('@/assets/theme-img/course-active.png') ,
                inactive:require('@/assets/theme-img/course.png'),
            },
            userIcon: {
                active:require('@/assets/theme-img/user-active.png') ,
                inactive:require('@/assets/theme-img/user.png'),
            },
        }
    },
    created() {

    },
    methods: {

    }
}
</script>
<style lang="scss" scoped>

</style>


